<template>
  <div class="asright">
    <!-- 自我介绍卡片 -->
    <div class="row ">
        <div class="col-md-10 col-md-offset-1 cardlist">
            <div class="iconzhu">
				    <img src="../../assets/card/hj.png" class=" imgas" />
             <img src="../../assets/logo.png" class="tous"/>
            </div>
            <div class="bo"> 
              <h4 class="title "><strong>Витас</strong></h4>
							<p class="suoming">湖北警官学院 | Go、Java</p>
						  <p class="suoming">文章数: 10 | 分类数: 5 | 评论数: 20</p>
                <hr/>
                <div class="col-md-3 col-md-offset-2 col-xs-2 col-xs-offset-3 ">
                  <a href="https://github.com/xt-summer " class="icongithub" ><i class="iconfont ">&#xe885;</i></a> 
                </div>
                 <div class="col-md-3 col-xs-2">
                   <a href="https://gitee.com/x-tian" class="icongitee"><i class="iconfont ">&#xe60c;</i></a>
                </div>
                 <div class="col-md-3 col-xs-2">
                  <a href="https://blog.csdn.net/xt623" class="iconcsdn"><i class="iconfont ">&#xe603;</i></a> 
                </div>
              </div>
        </div>
    </div>
    <!-- 公告信息 -->
    <div class="row ">
        <div class="col-md-10 col-md-offset-1 cardlist">
           <h4 class="title1 "><i class="iconfont ">&#xe8c4;</i><strong>公告信息</strong></h4>
           <div>
            <p>欢迎加入QQ群一起学习😜913626325</p>
            <p>公众号寅贝勒->大厂内推->微信群</p>
            <p>群内云集BAT大佬以及计算机在读硕博，来和大佬交流吧~</p>
           </div>
        </div>
    </div>
    
    <!-- 微信二维码 -->
    <div class="row">
        <div class="col-md-10 col-md-offset-1 cardlist">
          <h4 class="title1 "><i class="iconfont iconweixin">&#xe604;</i><strong>微信二维码</strong></h4>
          <img src="../../assets/card/weixin.png" class="weixin">
        </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.asright{
   margin: 20px 0px 0px 0px;
   width: auto;
   height: auto;
}
.imgas{
width: 100%;
  height: 100%;
 border-top-left-radius:10px;
border-top-right-radius:10px;
  box-shadow: 0px 11px 10px 0px #808080;
}
.iconzhu{
display: block;
width: 100%;
height: 150px;
}
.tous{
width: 60px;
height: 60px;
border-radius: 50px;
text-align: center;
position: absolute;
top:37%;
left: 45%;

/* transform:translate(150px,-40px); */
}
.title{
  margin: 10px;
  text-align: center;
    color: #EBA948;
    text-decoration: none;
}
.bo{
  margin: 30px 0px 0px 5px;
  display: block;
  width: 100%;

}
.suoming{
  color: #5E5E5E;
  text-align: center;
  margin: 10px;
}
.icongitee{
  color: #c71d23;
 
}
.icongitee:hover{
  color: #c71d23;
 text-decoration:none
}
.iconcsdn{
  color:#fc5531;
}
.iconcsdn:hover{
  color:#fc5531;
  text-decoration:none
}
.icongithub{
color: #000;
}
.icongithub:hover{
color: #000;
 text-decoration:none
}
.cardlist{
  width: 95%;
  height: auto;
  margin: 10px 0px 10px 10px;
  background-color: #fff;
   border-radius: 10px;
}
.title1{
  color: #fb6c2c;
}
.weixin{
width: 100%;
height: 100%;
}
.iconweixin{
  font-size: 20px;
}
</style>